<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { useRoute, useRouter } from 'vue-router';
import { registerApi, putRegister } from '@/api/user';
import { message } from 'ant-design-vue';
import { UserOutlined, LockOutlined, PhoneOutlined, UnlockOutlined, MailOutlined } from '@ant-design/icons-vue';
interface RegisterForm {
  username: string;
  account: string;
  password: string;
  repassword: string;
  mobile_phone: string;
}
const formRef = ref();
const router = useRouter();
const formState = reactive<RegisterForm>({
  username: '',
  account: '',
  password: '',
  repassword: '',
  mobile_phone: '',
});

const samePwd = async (_rule: Rule, value: string) => {
  if (value !== formState.password) {
    return Promise.reject('两次密码不一致');
  } else {
    return Promise.resolve();
  }
};

const rules = reactive({
  account: [
    { required: true, message: '请输入账号名称' },
    {
      pattern: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/,
      message: '账号名称必须是以字母开头且长度6-20的字母或数字',
      trigger: 'blur',
    },
  ],
  username: [{ required: true, message: '请输入昵称' }],
  password: [
    { required: true, message: '请输入密码' },
    {
      pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/,
      message: '密码必须是6位以上且包含数字和字母',
    },
  ],
  repassword: [
    { required: true, message: '请确认密码' },
    { validator: samePwd, trigger: 'blur' },
  ],
  mobile_phone: [
    { required: true, message: '请输入电话号码' },
    {
      type: 'string',
      message: '请输入正确的电话号码格式',
    },
  ], 

});

const registerFn = async (values: RegisterForm) => {
  let params = {
    username: values.username,
    account: values.account,
    password: values.password,
    mobile_phone: values.mobile_phone
  }
  console.log(params);
  const res: any = await registerApi(values.username, values.account, values.password, values.mobile_phone);
  console.log(res)
  if (res.code === 10000) {
  message.success('请查看手机验证码');
  router.push({ path: '/regcodeverify' });
  } else if (res.code === 10002) {
    message.error('账号已存在, 请激活该账号');
  } else {
    console.log('res', res);
    message.error(res.message || '注册失败');
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const goLogin = () => {
  router.push({ path: '/login' });
};


</script>

<template>
  <div id="register">
    <div class="register_box">
      <div class="left_register_img">
        <img src="/assets/image/login.png" alt="" />
      </div>
      <div class="right_register_form_box">
        <div class="form_title">
          <div>平台注册</div>
        </div>
        <div class="register_form">
          <a-form
            ref="formRef"
            :model="formState"
            :label-col="{ span: 0 }"
            :wrapper-col="{ span: 24 }"
            autocomplete="off"
            @finish="registerFn"
            @finishFailed="onFinishFailed"
            :rules="rules"
          >
            <a-form-item name="account">
              <a-input
                class="large_height"
                v-model:value="formState.account"
                placeholder="请输入账号，账号将用于登录"
                style="width: 360px"
                autocomplete="account"
              >
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="username">
              <a-input
                class="large_height"
                v-model:value="formState.username"
                placeholder="请输入昵称"
                style="width: 360px"
              >
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="password">
              <a-input-password
                class="large_height"
                v-model:value="formState.password"
                placeholder="请输入密码"
                style="width: 360px"
                autocomplete="new-password"
              >
                <template #prefix>
                  <LockOutlined class="site-form-item-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item name="repassword">
              <a-input-password
                class="large_height"
                v-model:value="formState.repassword"
                placeholder="请确认密码"
                style="width: 360px"
                autocomplete="new-password"
              >
                <template #prefix>
                  <UnlockOutlined class="site-form-item-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item name="mobile_phone">
              <a-input
                class="large_height"
                v-model:value="formState.mobile_phone"
                placeholder="请输入电话号码"
                style="width: 360px"
              >
                <template #prefix>
                  <PhoneOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
              <a-button type="primary" html-type="submit" class="large_height" style="width: 360px">注册</a-button>
            </a-form-item>
          </a-form>
          <div style="display: flex; justify-content: space-between">
            <div style="display: flex; align-items: center">
              <a-button type="link" @click="goLogin">去登录</a-button>
            </div>
            <!-- <a-tooltip placement="bottom" color="#FFFFFF">
              <a-button type="link">忘记密码</a-button>
            </a-tooltip> -->
          </div>
        </div>
      </div>
    </div>
    <div class="company_inf">Copyright ©2024 陈维龙毕业设计</div>
    <!-- <div class="iict_wx">
      <img src="../../assets/image/iict.jpg" />
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
@import './register.scss';

.fold_info {
  // display: flex;
  // justify-content: space-around;
  // font-weight: 700;
  color: black;
}

.selectable-span {
  cursor: text;
  /* 鼠标光标设置为文本光标 */
  user-select: text;
  /* 允许用户选中元素中的内容 */
}
</style>
